<template>
  <div class="content-top">
    <div class="shop-info">
      <img class="thumb" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542795060871&di=09a7e697b42a53ad021f6e90ca9291c2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F21a4462309f790520d57ef0407f3d7ca7bcbd544.jpg">
      <div class="info">
        <div class="name">戴记小吃</div>
        <div class="describe">主营生煎包、馒头、各类小吃</div>
      </div>
    </div>
    <div class="content">
      <scroll-view class="list-r" :scroll-y="true">
        <div class="item-list" v-for="(item, index) in foods" :key="index">
            <div class="item">
              <img class="thumb" :src="item.imgUrl">
              <div class="info">
                <span class="title">{{item.name}}</span>
                <span v-if="item.describe" class="describe">{{item.describe}}</span>
                <div class="price-info">
                  <span class="price">¥{{item.price}}</span>
                  <div class="add-item">
                    <div v-if="item.selectCount > 0" class="add-l" @click="reduceClick(item, index)">
                      <i class="icon mt-reduce-o"></i>
                      <span>{{item.selectCount}}</span>
                    </div>
                    <div class="add-r" @click="addClick(item, index)">
                      <i class="icon mt-add-o"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </scroll-view>
      
    </div>
    <div class="accounts">
      <div class="l">
        <span class="selected">已点<span class="selected-count">{{selectedCount}}</span></span>
        <span class="price">￥<span>{{totalPrice}}</span></span>
      </div>
      <div class="m-r" :style="{'background-color': totalPrice > 0 ? '#F0D179' : '#2F2F2F'}" @click="orderClick">
        <span :style="{'color': totalPrice >0 ? 'black' : 'darkgray'}">去结算</span>
      </div>
    </div>

    <!-- <div class="bottom-sheet">
      <div>
        <span>已点</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import { foods } from "./data";
import Http from '../../utils/webservice';
export default {
  data() {
    return {
      foods: [],
      totalPrice: 0,
      productCount: 0,
      selectedCount: 0
    };
  },
  mounted() {
    this.foods = foods;
    this.foods.map(item => {
      item.selectCount = 0;
    });
    this.testData()
  },
  methods: {
    addClick(item, index) {
      item.selectCount++;
      this.selectedCount++;
      this.totalPrice = this.totalPrice + item.price;
      this.$set(foods, index, item);
    },
    reduceClick(item, index) {
      item.selectCount--;
      this.selectedCount--;
      this.totalPrice = this.totalPrice - item.price;
      this.$set(foods, index, item);
    },
    orderClick() {
      wx.navigateTo({ url: "/pages/orderSubmit/main" });
    },
    async testData() {
      var result = await Http.get("article/list/0/json");
      console.log(result)
    }
  }
};
</script>

<style lang="less" scoped>
.content-top {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: whitesmoke;
}
.content {
  width: 100%;
  display: flex;
  padding-bottom: 90rpx;
}
.shop-info {
  display: flex;
  flex-wrap: wrap;
  background: #2f2f2f;
  height: 260rpx;
  align-items: center;
  .thumb {
    width: 160rpx;
    height: 160rpx;
    margin-left: 30rpx;
    display: block;
  }
  div {
    display: block;
    color: white;
  }
  .info {
    margin-left: 30rpx;
    .describe {
      font-size: 24rpx;
      color: gray;
      margin-top: 30rpx;
    }
  }
}
.accounts {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 88rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: white;
  box-shadow: 0 0 10px lightgrey;
  .l {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    .price {
      font-size: 32rpx;
      color: darkgrey;
      flex-grow: 2;
      text-align: right;
      margin-left: 50rpx;
      margin-right: 50rpx;
      color: red;
      span {
        margin-left: 10rpx;
        font-size: 40rpx;
      }
    }
    .selected {
      margin-left: 30rpx;
      font-size: 30rpx;
      .selected-count {
        margin-left: 10rpx;
      }
    }
    .m-l {
      display: flex;
      align-items: center;
      .l-l {
        font-size: 24rpx;
        color: darkgray;
      }
      .l-m {
        width: 2rpx;
        height: 20rpx;
        background-color: darkgray;
        margin: 0 20rpx;
      }
      .l-r {
        font-size: 24rpx;
        color: darkgray;
      }
    }
  }
  .m-r {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 88rpx;
    background-color: #2f2f2f;
    span {
      font-size: 32rpx;
      color: darkgray;
      font-weight: bold;
    }
  }
}
.item-list {
  .item {
    width: 100%;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    margin-bottom: 20rpx;
    background: white;
    .thumb {
      width: 200rpx;
      height: 150rpx;
    }
    .info {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      margin-left: 30rpx;
      .title {
        display: block;
        padding-bottom: 10rpx;
      }
      .describe {
        width: 90%;
        display: block;
        padding: 5rpx;
        font-size: 24rpx;
        color: gray;
        white-space:pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
      }
    }
    .price-info {
      display: flex;
      .price {
        display: inline-block;
        font-size: 38rpx;
        color: red;
        font-weight: bold;
        padding: 5rpx;
        flex-grow: 1;
      }

      .add-item {
        display: inline-flex;
        justify-content: flex-end;
        padding-right: 30rpx;
        margin-right: 30rpx;
        flex-grow: 3;
        align-items: center;
        .add-l {
          display: flex;
          flex-direction: row;
          align-items: center;
          i {
            font-size: 36rpx;
            color: darkgray;
          }
          span {
            font-size: 24rpx;
            color: black;
            margin: 0 20rpx;
          }
        }
        .add-r {
          i {
            font-size: 40rpx;
          }
        }
      }
    }
  }
}
</style>
